<template>
  <CloudDialog
    v-model:visible="visible"
    :title="title"
    :width="480"
    :mask-closable="false"
    :before-ok="handleSubmit">
    <a-form ref="formRef" :model="formState" :rules="rules" layout="vertical">
      <a-form-item
        label="DNS API 名称"
        field="name"
        hide-asterisk
        asterisk-position="end">
        <a-input
          v-model="formState.name"
          :max-length="20"
          show-word-limit
          placeholder="请输入 DNS API 名称"></a-input>
      </a-form-item>
      <a-form-item
        label="DNS 服务商"
        field="provider"
        class="server-item"
        hide-asterisk
        asterisk-position="end">
        <a-select
          v-model="formState.provider"
          :options="providerOptions"
          placeholder="请选择 DNS 服务商"></a-select>
      </a-form-item>
      <a-form-item
        v-if="formState.provider === 2"
        label="API Token"
        field="provider_config.api_token"
        hide-asterisk
        asterisk-position="end">
        <a-input
          v-model="formState.provider_config.api_token"
          placeholder="请输入 API Token"></a-input>
      </a-form-item>
      <template v-else>
        <a-form-item
          label="网关"
          field="provider_config.addr"
          hide-asterisk
          asterisk-position="end">
          <a-input
            v-model="formState.provider_config.addr"
            :max-length="200"
            placeholder="scheme://host:port"></a-input>
        </a-form-item>
        <a-form-item
          label="APP ID"
          field="provider_config.app_id"
          hide-asterisk
          asterisk-position="end">
          <a-input
            v-model="formState.provider_config.app_id"
            placeholder="请输入 APP ID"></a-input>
        </a-form-item>
        <a-form-item
          label="密钥"
          field="provider_config.app_key"
          hide-asterisk
          asterisk-position="end">
          <a-input
            v-model="formState.provider_config.app_key"
            placeholder="请输入密钥"></a-input>
        </a-form-item>
      </template>
    </a-form>
  </CloudDialog>
</template>
<script lang="ts" setup>
import type { DnsItem } from '@/apis/model/resolve'
import {
  addApiResolveDnsApiApi,
  updateApiResolveDnsApiApi
} from '@/apis/modules/resolve/dns'
import { providerOptions } from '@/constants'
import { Message, type FormInstance } from '@arco-design/web-vue'
import { omit, pick } from 'lodash-es'

interface IProp {
  record?: DnsItem
}
const visible = defineModel<boolean>('visible', { required: true })

const props = withDefaults(defineProps<IProp>(), {})
const emit = defineEmits(['reload', 'update:visible'])
const formRef = ref<FormInstance>()
const title = computed(() => (props.record?.id ? '编辑DNS API' : '添加DNS API'))

const formState = reactive({
  name: '',
  provider: 1,
  provider_config: {
    addr: '',
    app_id: '',
    app_key: '',
    api_token: ''
  }
})
const rules = computed<any>(() => {
  return formState.provider === 1
    ? {
        name: { required: true, message: '请输入 DNS API 名称' },
        provider: { required: true, message: '请选择 DNS 服务商' },
        'provider_config.addr': {
          required: true,
          message: '请输入网关'
        },
        'provider_config.app_id': {
          required: true,
          message: '请输入 app id'
        },
        'provider_config.app_key': {
          required: true,
          message: '请输入 app key'
        }
      }
    : {
        name: { required: true, message: '请输入 DNS API 名称' },
        provider: { required: true, message: '请选择 DNS 服务商' },
        'provider_config.api_token': {
          required: true,
          message: '请输入 api token'
        }
      }
})
// const handleOpen = async () => {
//   await nextTick()
//   Object.assign(formState, props.record)
// }

const handleSubmit = async () => {
  const error = await formRef.value?.validate()

  if (error) return false
  const conf =
    formState.provider === 1
      ? omit(formState.provider_config, ['api_token'])
      : pick(formState.provider_config, ['api_token'])
  const data = {
    ...omit(formState, ['provider_config']),
    provider_config: conf
  }
  const fn = props.record?.id
    ? updateApiResolveDnsApiApi
    : addApiResolveDnsApiApi
  const msg = props.record ? '修改成功' : '添加成功'
  return fn(data).then(() => {
    Message.success(msg)
    emit('reload')
  })
}
watch(
  () => visible.value,
  async (v) => {
    await nextTick()
    if (v) {
      Object.assign(formState, props.record)
    } else {
      formRef.value?.resetFields()
    }
  }
)
</script>
<style lang="less" scoped>
.server-item {
  margin-bottom: 24px;
  :deep(.arco-form-item-label) {
    flex: 1;
  }
}
</style>
